<template>
  <div>
    <div id="Chart2" ref="Chart2" style="height:300px; width: 100%;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
import 'echarts-wordcloud'
export default {
  data () {
    return {
      myChart: null,
      value: [
        {
          name: '美妆',
          value: '12.55'
        },{
          name: '时尚',
          value: '9.91'
        },{
          name: '美食',
          value: '8.25'
        },{
          name: '健康',
          value: '7.34'
        },{
          name: '家居家装',
          value: '5.68'
        },{
          name: '出行',
          value: '5.22'
        },{
          name: '科技数码',
          value: '4.88'
        },{
          name: '文化娱乐',
          value: '4.85'
        },{
          name: '母婴',
          value: '3.74'
        },{
          name: '减肥',
          value: '3.56'
        },
      ],
    }
  },
  created () {
  },
  mounted () {
    this.initEchart()
  },
  methods: {
    initEchart () {
      var that = this
      this.myChart = echarts.init(document.getElementById('Chart2'))
      that.myChart.setOption({
        backgroundColor: '#fff',
        tooltip: {
          show: false
        },
        series: [{
          type: 'wordCloud',
          shape: 'circle',
          gridSize: 6,
          drawOutOfBound: false,
          sizeRange: [10, 42],
          rotationRange: [0, 0],
          textStyle: {
            normal: {
              // fontFamily: 'sans-serif',
              color: function () {
                var colors = ['#A4D9FC', '#1C9FF7'];
                return colors[parseInt(Math.random() * 2)];
              }
            },
          },
          // textStyle: {
          //   normal: that.textColor.color4
          // },
          left: 'center',
          right: 'center',
          // top: 'center',
          width: '100%',
          height: '100%',
          // bottom: null,
          top: 0,
          bottom: 0,
          data: that.value
        }]
      })
    }
  }
}
</script>

<style lang='less' scoped>
</style>
